<!-- z-paging聊天item -->
<template>
    <view class="flex flex-direction">
        <text class="chat-time" v-if="item.createTime&&item.createTime.length">
            {{ item.createTime }}
        </text>

        <view class="chat-item justify-end" v-if="userStore.userInfo.username===item.fromUsername">
            <view class="chat-row">
                <view class="user-name text-right" v-if="item.fromUsername"> {{ item.fromUsername }}</view>
                <view v-if="item.type===3" class="chatBox-right" @click="viewImage(item.content)">
                    <MrImage :src="item.content" :width="200" :height="200"></MrImage>
                </view>
                <view v-else-if="item.type===2" @click="playVoice(item.content)" class="chatBox-right">
                    {{ getEmptyText(item.size) }} {{ item.size }}″
                    <view style="rotate: 270deg;font-size: 24px" class="cuIcon-wifi" :class="isPlay?'play':''"></view>
                </view>
                <view v-else-if="item.type===1" class="chatBox-right">
                    {{ item.content }}
                </view>
            </view>
            <view style="margin-left: 10px;margin-top: 8px">
                <MrAvatar :src="friend.fromAvatar" :size="100"></MrAvatar>
            </view>
        </view>
        <!-- 左-->
        <view class="chat-item" v-else>
            <view style="margin-right: 10px;margin-top: 8px">
                <MrAvatar :src="friend.toAvatar" :size="100"></MrAvatar>
            </view>
            <view class="chat-row">
                <view class="user-name" v-if="item.fromUsername"> {{ item.fromUsername }}</view>
                <view v-if="item.type===3" class="chatBox-left" @click="viewImage(item.content)">
                    <MrImage :src="item.content" :width="200" :height="200"></MrImage>
                </view>
                <view v-else-if="item.type===2" @click="playVoice(item.content)" class="chatBox-left">
                    <view style="rotate: 90deg;font-size: 24px" class="cuIcon-wifi" :class="isPlay?'play':''"></view>
                    {{ getEmptyText(item.size) }}{{ item.size }}″
                </view>
                <view v-else-if="item.type===1" class="chatBox-left">
                    {{ item.content }}
                </view>
            </view>
        </view>

    </view>
</template>

<script setup lang="ts">
import {defineProps, ref} from "vue";
import {useUserStore} from "@/store";
import {imagePathPrefix} from '/settings'
import MrAvatar from "@/components/common/MrAvatar.vue";
import MrImage from "@/components/common/MrImage.vue";
import {onReady} from "@dcloudio/uni-app";

const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();

const isPlay = ref()

onReady(() => {
    innerAudioContext.onPlay((result) => {
        isPlay.value = true
    })
    innerAudioContext.onEnded((result) => {
        isPlay.value = false
    })
})

const prefix = imagePathPrefix
const userStore = useUserStore()

const props = defineProps({
    item: {
        type: Object,
        default: {}
    },
    friend: {
        type: Object,
        default: {}
    }
})
/**
 * 语音 空长度
 * @param size
 */
const getEmptyText = (size: number) => {
    let str = ' '
    for (let i = 0; i++; i < size) {
        str += ' '
    }
    console.log('str', str, size)
    return str
}
const playVoice = (value: any) => {
    let src = prefix + value
    innerAudioContext.src = src
    innerAudioContext.play();
}
const viewImage = (image: any) => {
    console.log(1)
    image = prefix + image
    uni.previewImage({
        urls: [image],
        current: image
    })
}
</script>

<style scoped>
.chat-row {
    max-width: 70%;
    display: flex;
    flex-direction: column;
}

.chatBox-right {
    display: flex;
    align-self: flex-end;
    align-items: center;
    position: relative;
    padding: 5px 8px;
    word-break: break-all;
    background: #19bd6b;
    color: #f1f1f1;
    border-radius: 5px;
    min-width: 20px;
}

.chatBox-right::before {
    display: flex;
    rotate: 180deg;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: -15px;
    top: 5px;
    border: 8px solid;
    border-color: transparent #19bd6b transparent transparent;
}


.chatBox-left {
    display: flex;
    align-self: flex-start;
    align-items: center;
    position: relative;
    padding: 5px 8px;
    word-break: break-all;
    background: #19bd6b;
    color: #f1f1f1;
    border-radius: 5px;
    min-width: 20px;
}

.chatBox-left::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: -15px;
    top: 5px;
    border: 8px solid;
    border-color: transparent #19bd6b transparent transparent;
}

.user-name {
    font-size: 15px;
    color: #999;
}

.play {
    animation-name: voice;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes voice {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

.chat-item {
    width: 100%;
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    display: flex;
    position: relative;
}

.chat-time {
    padding: 2px 0;
    text-align: center;
    font-size: 14px;
    color: #aaaaaa;
}
</style>